<template>
	<view class="news-page">
		<view class="fixed-box">
			<scroll-view scroll-x class="tab">
				<view class="head flex-box">
					<view class="tab-bar-item" v-for="(item, index) in tabBars" :key="index" @click="changeTabs(index, item.id)">
						<view class="tab-bar-title" :class="tabIndex === index ? 'sub-cate-active' : ''">{{ item.name }}</view>
						<view class="underline" v-if="tabIndex === index"></view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="news-box">
			<view v-if="newsList.length > 0">
				<news-item class="news-item" v-for="(item, index) in newsList" :key="index" :news="item" />
				<uni-load-more :status="loadingType" :contentText="contentText"></uni-load-more>
			</view>
			<view v-else class="tips">暂无更多内容</view>
		</view>
	</view>
</template>

<script>
import { post_md5 } from './../../common/request';
import NewsItem from './news-item';
import { setNavTitle } from '../../common/common';

export default {
	components: {
		NewsItem
	},
	data() {
		return {
			view: null,
			page: 1,
			refreshing: false,
			refreshText: '下拉可以刷新',
			loadingType: 'more', //定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			tabIndex: 0,
			tabBars: [],
			newsList: [],
			tabId: '',
			title: '',
			logo: ''
			// cateTop: '0upx'
		};
	},
	onLoad(options) {
		console.log(options)
		post_md5('/news-app/news/getnewscategors').then(res => {
			if (res.data.length > 0) {
				this.tabBars = res.data;
				if (parseInt(uni.getStorageSync('notice')) === 1) {
					uni.setStorageSync('notice', 0);
					res.data.forEach((x, i) => {
						if (options.cateId === x.id) {
							this.tabIndex = i;
							this.tabId = x.id;
							this.getNewsList();
						}
						
						if (x.name === '警示教育') {
							this.tabIndex = i;
							this.tabId = x.id;
							this.getNewsList();
						}						
					});
				} else {
					this.tabIndex = 0;
					this.tabId = this.tabBars[0].id;
					this.getNewsList();
				}
			}
		});
	},
	onShow() {
		this.getTitleLogo();
	},
	// onHide() {
	// 	if (this.view !== null && this.view !== undefined) {
	// 		this.view.close();
	// 		this.view = null
	// 	}
	// },
	// onUnload() {
	// 	if (this.view !== null && this.view !== undefined) {
	// 		this.view.close();
	// 		this.view = null
	// 	}
	// },
	onPullDownRefresh() {
		this.getTitleLogo();
		//下拉刷新的时候请求一次数据
		this.page = 1;
		this.loadingType = 'more';
		this.newsList = [];
		this.getNewsList();
	},
	onReachBottom() {
		this.getNewsList();
	},
	methods: {
		getTitleLogo() {
			// if (this.view !== null && this.view !== undefined) {
			// 	this.view.close();
			// 	this.view = null
			// }
			// #ifdef APP-PLUS
			post_md5('/sys/tenantsysconfig/appinfo').then(res => {
				let data = JSON.parse(res.data);
				setNavTitle(data.newstitle);
				// this.view = setNavLogo(data.logoUrl)
				// this.view.show()
			});
			// #endif
		},
		// 获取对应分类的新闻
		getNewsList() {
			if (this.loadingType !== 'more') {
				//loadingType!=0;直接返回
				return false;
			}
			this.loadingType = 'loading';
			uni.showNavigationBarLoading(); //显示加载动画
			const params = {
				cateId: this.tabId,
				page: this.page
			};
			post_md5('/news-app/news/getnewslistbycateid', params).then(res => {
				this.page++;
				uni.stopPullDownRefresh();
				if (res.data.list.length > 0) {
					for (let i in res.data.list) {
						this.newsList.push(res.data.list[i]);
					}
					if (this.newsList.length > 5) {
						this.loadingType = 'more';
					} else {
						this.loadingType = 'noMore';
					}
					uni.hideNavigationBarLoading(); //关闭加载动画
				} else {
					this.loadingType = 'noMore';
					uni.hideNavigationBarLoading(); //关闭加载动画
				}
			});
		},

		// 切换tab
		changeTabs(index, id) {
			if (this.tabIndex === index) {
				return false;
			}
			this.tabIndex = index;
			this.tabId = id;
			this.loadingType = 'more';
			this.newsList = [];
			this.page = 1;
			this.getNewsList();
		}
	}
};
</script>

<style lang="less">
.news-page {
	.fixed-box {
		background: #ffffff;

		.tab {
			width: 750upx;
			overflow: hidden;

			.head {
				padding: 0;
				height: 96upx;
				margin: 0;
				border: 0;

				.tab-bar-item {
					.underline {
						height: 4upx;
					}
				}
			}
		}
	}

	.news-box {
		background: #ffffff;
		height: calc(100% - 100upx);

		.tips {
			color: #999999;
			text-align: center;
			margin-top: 100upx;
		}
	}
}
</style>
